<template>
  <view>
    <view class="list">
      <view class="list-item" v-for="(v, i) in list" :key="i">
        <view class="left">
          <image :src="v.image" mode=""></image>
        </view>
        <view class="right">
          <text>{{ v.title }}</text>
          <text>{{ v.word }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      async getList() {
        const [error, resp] = await uni.request({
          url: 'http://localhost:3000/list',
          data: {
            _page: this.page
          }
        })
        if (error) {
          console.log('请求报错， 非常遗憾', error);
          return;
        }
        this.list = resp.data
      }
    },
    data() {
      return {
        list: [],
        page: 1
      };
    },
    onLoad() {
      this.getList()
    },
    onReachBottom() {
      console.log('到底部了！！！')
    }
  }
</script>

<style lang="scss">
  .list-item {
    display: flex;
  
  .left {
      flex-shrink: 0;

      image {
        width: 200px;
        height: 150px;
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      text {}
    }
  }
</style>
